import React, { Component } from 'react';
import styles from  './menu.css'
//import {formatNowTime} from '../../../../utils/utils'

 
import {globalQuery,globalPostQuery} from '../../../services/global';
import {getPerm_url} from '../../../services/ip';


class Menu extends Component {
    constructor(props) {
        super(props);
        this.state={
          data:[{text:"实时监测",link:"Live",child:[{text:"自动站"},{text:"遥感监测"},{text:"预警监测"}]},
                {text:"服务产品",link:"Alarm"},
                {text:"监控中心",link:"Monitoring"},
                {text:"三维展示",link:"System"},
            ], 
        }
    } 
    handleTabClick=({value,index})=>{
        this.props.handleTabClick({value,index}); 
    }

    componentDidMount(){
        
    }
    render() {
        const {data}=this.state; 
        const {selectIndex}=this.props; 
        let html = data.map((item,key)=>{
            let childHtml = null;
            if(item.child){ 
                 let childHtml1 = item.child.map((item1,key1)=>{
                   return <li key={key1}>{item1.text}</li>
                 })
                childHtml =<ul className={styles.childBox}>
                    {childHtml1}
                </ul> 
            } 
            return  <li key={key}>
                        <div className={styles.parensBox} className={selectIndex == key ? styles.active :null}   onClick={()=>this.handleTabClick({value:item.link,index:key})}>{item.text}</div> 
                        {childHtml}
                    </li>
        })
        return ( 
            <div className={styles.tabCom}> 
                <ul>
                    {html}
                </ul>
            </div> 
        );
    } 
}

export default Menu;